<template>
  <div id="register1">
    <van-form @submit="onSubmit" id="registerForm">
      <van-field
          v-model="username"
          name="username"
          label="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
          :formatter="formatter"
      />
      <van-field
          type="password"
          v-model="password"
          name="password"
          label="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
          :formatter="formatter"
      />
      <van-field
          type="password"
          v-model="rePassword"
          name="rePassword"
          label="确认密码"
          :rules="[{validator: rePasswordValidate, message: '两次密码输入不一致'}]"
          :formatter="formatter"
      />
      <van-field name="sex" label="性别" :rules="[{required: true,message:'请选择性别'}]">
        <template #input>
          <van-radio-group v-model="sex" direction="horizontal">
            <van-radio name="M">男</van-radio>
            <van-radio name="W">女</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field
          v-model="email"
          name="email"
          label="邮箱"
          :rules="[{ required: true,pattern: emailValidate,message:'邮箱格式有误'}]"
          :formatter="formatter"
      />
      <van-field
          disabled
          v-model="schoolName"
          name="schoolName"
          label="学校"
          :rules="[{ required: true, message: '请填写用户名' }]"
          :formatter="formatter"
      />
      <div>
        <van-button plain :loading="isLoading" id="submitBtn" type="info" native-type="submit">
          下一步
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import {Toast} from 'vant';

export default {
  name: "Register1",
  data: function () {
    return {
      username: '',
      password: '',
      rePassword: '',
      email: '',
      sex: '',
      schoolName: '华南农业大学',
      isLoading: false,
      emailValidate: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
    }
  },
  methods: {
    onSubmit(e) {
      this.isLoading = true;
      this.checkEmail().then((res) => {
        console.log(res);
        this.$store.commit('setRegisterInfo', {value: e, key: 'info'});
        setTimeout(() => {
          this.$router.push('/register/2');
          this.isLoading = false;
        }, 1000);
      }).catch((err) => {
        Toast.fail(err.msg + '\n请重新填写');
        this.isLoading = false;
      })
    },
    formatter(v) {
      return v.trim();
    },
    rePasswordValidate(val) {
      return this.password.trim() === val.trim();
    },
    checkEmail() {
      let email = this.email;
      return new Promise(((resolve, reject) => {
        axios.post('/yibancircle/register', {
          email,
          forget: ''
        }, {
          headers: {'Content-type': 'application/json;charset=utf-8'}
        }).then((res) => {
          if (res.status === 200) {
            localStorage.setItem('forgetPwdCode', res.result.code);
            resolve(res);
          } else {
            reject(res);
          }
        })
      }))
    }
  }
}
</script>

<style scoped>
#submitBtn {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 100;
}

.registerForm {
  height: 100%;
}
</style>
